CSS Cursor and the Modern Web

The W3 specification for styling the cursor provides a surprising amount of flexibility. You can do any of the following, and then some:

  • Specify an alternate cursor for an arbitrary element, e.g. cursor: se-resize;
  • Use a PNG image, e.g. cursor: url('image.png');
  • Use an animated SVG image, e.g. cursor: url('animated.svg');
  • Adjust the offset of cursor image, e.g. cursor: url('image.svg') 50px 0px;
  • Show no cursor at all, e.g. cursor: none;

The question that occurs to many developers and other web-focused individuals is why all of this is needed — and why, in 2018 (or ’19, or however long current standards persist), it remains an accepted style choice.

The question that occurs to many developers and other web-focused individuals is why all of this is needed — and why, in 2018 (or ’19, or however long current standards persist), it remains an accepted style choice.

It’s true that by doing away with cursor customization, you’d gain a lot of normalcy, and ward off amateurish attempts to customize the pants off a site.

But you’d also be getting rid of a lot of reasonable and helpful use cases — besides locking down the very customization which makes the web such a fantastic open playing field.

Here are a few potential use cases:

  1. Customized elements, unrecognized by the browser, the purpose of which need to be indicated to the user.
    Example: Custom javascript was written to copy text from a field to clipboard when the element is clicked. This should be indicated to any non-mobile user when they mouse over the element, by changing the cursor to copy.
  2. An element of the page is interactive in a unique way, and this needs to be indicated.
    Example: a javascript in-browser game, where you might want to override the cursor entirely.
  3. Unique visual styling, to draw attention.
    Example: a visual portfolio, designed to stand out.

Interestingly, there are cases when it is acceptable (per the standards) for the user agent (typically the browser) to actually ignore the cursor specification. Native UI elements such as scrollbars are exempt from enforcing custom cursor styles. UI states can also ignore cursor styles, for instance when displaying a “busy” icon to indicate that the page is loading, or a text cursor when working with text — not something you’d want a stylesheet to override!

Cursor styles, as with many viable style options, should be treated with care and not overused. But in the right situation, they can help a great deal to improve the user’s experience.

And besides, where would the web be without the occasional bit of crazy customization?

If you want to contact me about this article for any reason, please email me at
martin at mberlove dot com
.
This entry was posted in web development and tagged . Bookmark the permalink.